<template>
  <nut-elevator :index-list="transformList" :height="260" @click-item="clickItem"
    @click-index="clickIndex"></nut-elevator>
</template>

<script setup lang='ts'>

import { getNameGoods } from "@/@api/wait"; // 待审核页面接口
import { useDidShow } from "@tarojs/taro";
import { pinyin } from "pinyin-pro"
import { ref } from "vue";

const transformList = ref([])

useDidShow(() => {
  initList();
});

// 点击索引
const clickIndex = (key)=>{
  console.log(key,'点击索引')
}

// 点击内容
const clickItem = (key,item)=>{
  console.log(key,item,item.name,'点击内容')
}



async function initList() {
  const params = {
    ssopSign: 1,
    ssopRemark: ""
  };
  const res = await getNameGoods(params);
  if (res.data.code == 200) {
    console.log(res.data, '获取货物列表')
    const wordList = res.data.data;
    // console.log(pinyin(wordList.data[1].ssopRemark),'拼音')

    let arr: any = []
    let obj = {}
    for (let i = 0; i < wordList.length; i++) {
      let firstLetter = (pinyin(wordList[i].ssopRemark, { pattern: 'first', toneType: 'none', type: 'array' })[0]).toUpperCase()
      if (!obj[firstLetter]) {
        obj[firstLetter] = [{ ...wordList[i], name: wordList[i].ssopRemark, id: wordList[i].ssopId }]
      }
      else {
        obj[firstLetter].push({ ...wordList[i], name: wordList[i].ssopRemark, id: wordList[i].ssopId })
      }
    }
    for (let key in obj) {
      arr.push({
        title: key,
        list: obj[key]
      })
    }
    arr.sort((a, b) => {
      return a.title.charCodeAt() - b.title.charCodeAt()
    })
    console.log(arr,'重组后的数据')
    transformList.value = arr;
  }
}
</script>

<style lang="scss">
.nut-elevator__list .nut-elevator__list__fixed__wrapper {
    display: none;
  }
</style>